<template>
    <div class="box">
        <header class="header">
            <van-search v-model="info" show-action placeholder="请输入搜索关键词" @update:model-value="onUpdate">
                <template #left>
                    <van-icon name="arrow-left" size="22" @click="$router.back()" />
                </template>
                <template #action>
                    <van-button type="danger" size="small">搜索</van-button>
                </template>
            </van-search>
        </header>
        <div class="content">
            <van-empty v-if="list.length == 0" image="search" description="未找到当前搜索商品" />
            <div v-else v-for="item in list" :key="item.id">
                <van-card :price="item.price" desc="描述信息" :title="item.title" :thumb="item.image" />
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

import request from '@/utils/request'
import shake from '@/utils/shake'
const info = ref('')
const list = ref([])
const onUpdate = shake(() => {
    request.get('/search', {
        params: {
            value: info.value
        }
    }).then(res => {
        if (res.data.code == 200) {
            list.value = res.data.data
        }
    })
}, 1000)
// const query = () => {
//     request.get('/search', {
//         params: {
//             value: info.value
//         }
//     }).then(res => {
//         if (res.data.code == 200) {
//             list.value = res.data.data
//         }
//     })
// }
// const onUpdate = shake(() => {
//     query()
// }, 1000)
onMounted(() => {
    onUpdate()
})

</script>